<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl" xmlns:bb="http://www.backbase.com/2006/client"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="positionElement dimensionElement" src="../visualElement/visualElement.xml"/>

		<d:element name="codeHighlighter" extends="b:dimensionElement">
			
			<d:resource type="text/javascript"><![CDATA[
				btl.codeHighlighter = {};

				btl.codeHighlighter.xml = function btl_codeHighlighter_xml(oNode, bChildren) {
					if(bChildren){
						return btl.codeHighlighter.xml({nodeType: 9, childNodes: oNode.childNodes}, false);
					}

					var	a = [],
						sName,
						oChildren,
						i = 0,
						sText,
						oChild;

					switch (oNode.nodeType) {

						case 1://ELEMENT_NODE:
							a[a.length] = '<div class="btl-code-element">';

							sName = oNode.nodeName.split(':');

							if( sName.length == 2){
								a[a.length] = '<span class="btl-code-name-attr">&lt;<span class="btl-code-prefix">' + sName[0] + '</span>:<span class="btl-code-name">' + sName[1] + '</span>';
								sName = '<span class="btl-code-name-attr">&lt;/<span class="btl-code-prefix">' + sName[0] + '</span>:<span class="btl-code-name">' + sName[1] + '</span>&gt;</span>';
							} else {
								a[a.length] = '<span class="btl-code-name-attr">&lt;<span class="btl-code-name">' + sName[0] + '</span>';
								sName = '<span class="btl-code-name-attr">&lt;/<span class="btl-code-name">' + sName[0] + '</span>&gt;</span>';
							}

							a[a.length] = btl.codeHighlighter.xml._attributes(oNode);

							if ( oNode.hasChildNodes() ){

								a[a.length] = '&gt;</span>';

								if( oNode.lastChild == oNode.firstChild && oNode.firstChild.nodeType == 3){
									var iMatch = (oNode.firstChild.nodeValue+'').match(/\n/gm);
									if(iMatch && iMatch.length)
										a[a.length] = '\n';
								}else
									a[a.length] = '\n';

								oChildren = oNode.childNodes,
								i = 0,
								oChild;

								while(oChild = oChildren[i++])
									a[a.length] = btl.codeHighlighter.xml(oChild, bChildren);

								a[a.length] = sName+'\n';

							} else {
								a[a.length] = ' /&gt;</span>\n';
							}
							a[a.length] = '</div>';

						break;


						case 9://DOCUMENT_NODE:

							oChildren = oNode.childNodes,
							i = 0,
							oChild;
							while(oChild = oChildren[i++])
								a[a.length] = btl.codeHighlighter.xml(oChild, bChildren);
						break;


						case 7://PROCESSING_INSTRUCTION_NODE:
							a[a.length] = "&lt;?" + oNode.nodeName;
							a[a.length] = btl.codeHighlighter.xml._attributes(oNode);
							a[a.length] = "?&gt;\n";
						break;


						case 4://CDATA_SECTION_NODE:
						case 8://COMMENT_NODE:
						case 3://TEXT_NODE:

							if (!/^\s*$/.test(oNode.nodeValue)) {
								var sEnd = '</pre>';

								var sText = bb.string.escapeXml(oNode.nodeValue);
								if (oNode.nodeType == 4) {
									sText = '<pre class="btl-code-cdata">&lt;![CDATA[' + sText + ']]&gt;';
								} else if(oNode.nodeType == 8) {
									sText = '<pre class="btl-code-comment">&lt;!--' + sText + '--&gt;';
								} else {
									var iMatch = sText.match(/\n/gm) || [];
									if(!oNode.nextSibling && !oNode.previousSibling && !iMatch.length){
										sText = '<span class="btl-code-text">' + sText;
										sEnd = '</span>';
									} else {
										sText = '<pre class="btl-code-text">' + sText;
									}
								}

								var sSplit = sText.split("\n").pop();
								var iCount = sSplit.match(/\t/g);
								iCount = iCount ? iCount.length : 0;
								var eRegExp = new RegExp('^\t{'+iCount+'}', 'gm');

								sText = sText.replace(eRegExp, '');

								if(sText.indexOf("\n") == 27){
									sText = sText.replace(/\n/, '');
								}

								if(sText.lastIndexOf("\n") != sText.length-1 && sEnd == '</pre>')
									sEnd = '\n'+sEnd;

								a[a.length] = sText + sEnd;
							}
						break;

						case 10://DOCUMENT_TYPE_NODE:
							a[a.length] = '<div class="btl-code-doctype">&lt;!DOCTYPE ' + oNode.name;
							if (oNode.publicId) {
								a[a.length] = ' PUBLIC "' + oNode.publicId + '"';
								if (oNode.systemId)
									a[a.length] = ' "' + oNode.systemId + '"';
							}
							else if (oNode.systemId) {
								a[a.length] = ' SYSTEM "' + oNode.systemId + '"';
							}
							a[a.length] = '&gt;</div>';
							// TODO: Handle custom DOCTYPE declarations (ELEMENT, ATTRIBUTE, ENTITY)
						break;

					}

					return a.join('');
				}

				btl.codeHighlighter.xml._attributes = function btl_codeHighlighter_xml__attributes(oNode) {
					var	i = 0,
						a = [],
						sName,
						oAttr,
						aAttributes = oNode.attributes;
					while ( oAttr = aAttributes[i++] ) {
						if (oAttr.nodeName != 'bid__' && oAttr.nodeName != 'pid__' && oAttr.nodeName != 'rid__') {

							var sName = oAttr.nodeName.split(':');
							if (sName.length == 2){
								a[a.length] = '<span class="btl-code-prefix">&#160;' + sName[0] + '</span>:' + sName[1] + '';
							} else {
								a[a.length] = '&#160;' + sName[0] + '';
							}
							a[a.length] = '="<span class="btl-code-value">' + bb.string.escapeXml(oAttr.nodeValue).replace(/\s/g, '&#160;') + '</span>"';
						}
					}
					return a.join('');
				}

				btl.codeHighlighter.getGutter = function btl_codeHighlighter_getGutter(sStr){
					var sLines = '';
					if(sStr){
						var iCount = sStr.match(/\n/gm).length;
						for(var i = 0; i < iCount; i++){
							sLines += (i+1)+".\n";
						}
					}
					return sLines;
				}
				]]></d:resource>

				<d:resource type="text/css"><![CDATA[
					.btl-codeHighlighter {
						position: relative;
						padding-left: 43px;
						zoom: 1.0;
					}
					.btl-codeHighlighter-hideGutter {
						padding-left: 3px;
					}
					.btl-codeHighlighter-hideGutter .btl-codeHighlighter-gutter {
						display: none;
					}
					.btl-codeHighlighter pre, .btl-codeHighlighter pre * {
						line-height: 14px;
						font-family: "Consolas", "Courier New", Courier, mono, serif;
						font-size: 12px;
					}
					.btl-codeHighlighter-gutter {
						text-align: right;
						position: absolute;
						top: 0;
						left: 0;
						width: 40px;
						background-color: lightgrey;
						border-right: 2px solid grey;
						height: 100%;
						margin: 0;
						padding: 0;
						overflow: hidden;
					}
					.btl-codeHighlighter-view {
						padding: 0;
						position: relative;
						z-index: 2;
						margin: 0;
						overflow:auto;
						width: 100%;
	 					overflow-y: hidden;
					}
					.btl-code-element {
						color: darkblue;
					}
					.btl-code-element .btl-code-element {
						padding-left: 16px;
					}

					.btl-code-name {
						color: blue;
					}
					.btl-code-name-attr {
						overflow:hidden;
						height:14px;
						color: darkblue;
					}
					.btl-code-prefix {
						color: black;
					}
					.btl-code-value {
						color: red;
					}
					pre.btl-code-text, pre.btl-code-comment, pre.btl-code-cdata {
						margin:0px;
						padding:0px;
					}
					pre.btl-code-text {
						color: black;
					}
					span.btl-code-text {
						color: black;
						white-space: pre;
					}
					pre.btl-code-cdata {
						color: green;
					}
					pre.btl-code-comment {
						color: grey;
					}
					pre.btl-code-doctype {
						color: blue;
					}
					.btl-code-element pre.btl-code-text, .btl-code-element pre.btl-code-doctype, .btl-code-element pre.btl-code-comment, .btl-code-element pre.btl-code-cdata {
						padding-left: 16px;
					}
				]]></d:resource>

				<d:template type="application/xhtml+xml">
					<div class="btl-codeHighlighter">
						<pre class="btl-codeHighlighter-gutter"/><pre class="btl-codeHighlighter-view"><d:content/></pre>
					</div>
				</d:template>

				<d:attribute name="gutter" default="true">
					<d:mapper><![CDATA[
						if(!btl.isTrueValue('gutter', value))
							bb.html.addClass(this.viewNode, 'btl-codeHighlighter-hideGutter');
						else
							bb.html.removeClass(this.viewNode, 'btl-codeHighlighter-hideGutter');
					]]></d:mapper>
				</d:attribute>

				<d:method name="__children">
					<d:body type="text/javascript"><![CDATA[
						var sStr = btl.codeHighlighter.xml(this.modelNode, true);

						var oOl = this.viewGate.previousSibling;

						if (bb.browser.ie){
						   oOl.innerText = btl.codeHighlighter.getGutter(sStr);
						   this.viewGate.outerHTML = '<pre class="btl-codeHighlighter-view">'+sStr+'</pre>'; //Need outerHTML for IE otherwise it will normalize the string (innerHTML);
						   this.viewGate = oOl.nextSibling; //Needed because viewGate was resetet previous line
						} else {
							oOl.innerHTML = btl.codeHighlighter.getGutter(sStr);
							this.viewGate.innerHTML = sStr;
						}
					]]></d:body>
				</d:method>
				<d:handler event="DOMNodeInsertedIntoDocument" type="text/javascript"><![CDATA[
					if(this.viewGate.firstChild){

						if(bb.browser.ie){
							this.viewGate.style.paddingBottom =  '20px';
							this.viewGate.previousSibling.style.paddingBottom = '20px';
						}else
							bb.html.setStyle(this.viewGate.firstChild, 'float', 'left');

						var iWidth = bb.html.getBoxObject(this.viewGate.firstChild).width;

						if(iWidth > 0)
							this.viewGate.firstChild.style.width = iWidth + 'px';

						if(!bb.browser.ie)
							bb.html.setStyle(this.viewGate.firstChild, 'float', '');
					}
				]]></d:handler>
		</d:element>
	</d:namespace>
</d:tdl>